<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learnEvent</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        /* ul {
            display: none;
        } */

        h3 {
            width: 100px;
        }

        .box1,
        .box2 {
            width: 100px;
            height: 100px;
            background-color: grey;
            text-align: center;
            border: 1px solid;
        }

        p {
            display: block;
            width: 50px;
            margin: 0 auto;
            margin-top: 40px;
            background-color: #fff;
        }

        .tsb {
            width: 100px;
            height: 100px;
        }

        a {
            position: absolute;
            top: 1000px;
            left: 1000px;
        }
    </style>
</head>

<body>
    <form action="">
        <input type="submit" value="提交">
        <button>提交2</button>
        <input type="button" value="点击">
    </form>

    <!-- <div class="father">
        <div class="son">
        </div>
    </div> -->

    <!-- <a href="http://baidu.com">百度</a> -->

    <!-- <div class="goods">
        <h3>商品列表：</h3>
        <ul>
            <li>啤酒</li>
            <li>饮料</li>
            <li>矿泉水</li>
            <li>花生</li>
            <li>瓜子</li>
            <li>八宝粥</li>
        </ul>
    </div> -->

    <div class="box1">
        <p>摸我</p>
    </div>
    <div class="box2">
        <p>摸我</p>
    </div>

    <!-- R:<button>-</button><input type="number"><button>+</button>
    G:<button>-</button><input type="number"><button>+</button>
    B:<button>-</button><input type="number"><button>+</button>
    <div class="tsb"></div> -->


    <ul class="list">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <!-- <a href="javascript:;">回到顶部</a> -->
    <script>
        var btn = document.querySelector('input[type=button]');
        // var father = document.querySelector('.father')
        // var son = document.querySelector('.son');
        // var oa = document.querySelector('a');
        // var goodsHead = document.querySelector('h3');
        // var goodsList = document.querySelector('ul');
        // 移除事件
        // btn.onclick = null;
        // btn.removeAttribute('onclick');
        // btn.setAttribute('onclick', null);
        function f1() {
            alert(1);
        }
        function f2() {
            alert(2);
        }
        function f3() {
            alert(3);
        }
        // 非IE同一元素绑定多个事件顺序执行
        // btn.addEventListener('click', f1);
        // btn.addEventListener('click', f2);
        // btn.addEventListener('click', f3);

        btn.onmousedown = function (e) {
            console.log(e.button);
        }
        btn.addEventListener('mousewheel', function (e) {
            console.log(e.wheelDelta);
        })

        //***事件流：1.事件冒泡：内部元素事件先触发，再触发外部元素
        //       2.事件捕获：外部元素事件先触发，再触发内部元素
        //      useCapture为true时事件捕获，false时事件冒泡，默认为false
        //      先触发为true的，再触发false的
        // function fun(e) {
        //     alert('我是father');
        //     //阻止冒泡事件流
        //     // e.stopPropagation();
        //     console.log(e);
        // }
        // father.addEventListener('click', fun, true);
        // son.addEventListener('click', function () {
        //     alert('我是son');
        //     // event.stopPropagation();
        // }, true);
        // 移除事件
        // father.removeEventListener('click', fun, true);


        // 老版IE浏览器绑定事件
        // IE同一元素绑定多个事件倒叙执行
        // father.attachEvent('onclick', function f1() {
        //     alert('我是father');
        // });
        // son.attachEvent('onclick', function (e) {
        //     alert('我是son');
        //     // 阻止冒泡事件流
        //     e.cancelBubble = true;
        //     console.log(e)
        // });
        // 移除事件
        // father.detachEvent('onclick', f1());

        // oa.onclick = function (e) {
        //     // 阻止默认行为--两种方法
        //     e.preventDefault();
        //     // e.returnValue = false;
        // }


        // goodsHead.onclick = function (event) {
        //     var ulStyle = window.getComputedStyle(goodsList);
        //     // 老版本IE用currentStyle属性
        //     // var ulStyle=goodsList.currentStyle;
        //     if (ulStyle.display == 'none') {
        //         goodsList.style.display = "block";
        //         event.stopPropagation();
        //     } else {
        //         goodsList.style.display = "none";
        //     }

        // }
        // window.onclick = function () {
        //     goodsList.style.display = "none";
        // }


        // 兼容性封装
        function addEvent(element, type, method) {
            if (element.addEventListener) {
                return element.addEventListener(type, method);
            } else if (element.addEvent) {
                element.addEvent('on' + type, method);
            } else {
                element['on' + type] = method;
            }
        }
        // addEvent(btn, "mouseover", function () {
        //     alert("不要摸我！！！")
        // })


        // 鼠标事件
        // 鼠标单击~~onclick
        // 鼠标双击~~ondblclicks
        // 鼠标按下~~onmousedown
        // 鼠标抬起~~onmouseup
        // 鼠标移动~~onmousemove
        // 鼠标移入~~onmouseover
        // 鼠标移出~~onmouseout
        // 鼠标移入(不冒泡)~~onmouseenter
        // 鼠标移出(不冒泡)~~onmouseleave
        // 鼠标右键打开上下文菜单~~oncontextmenu
        // btn.ondblclick = function () {
        //     alert("不要点了");
        // }

        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        var x = 0;
        var y = 0;
        box1.addEventListener('mouseover', function (e) {
            ++x;
            box1.querySelector('p').innerHTML = x;
            // 事件类型
            console.log(e.type);
            // **bubbles属性用来获得【当前触发事件的类型】是否冒泡**
            console.log(e.bubbles);
            // **eventPhase：事件传导至【当前节点】时处于什么的状态**。
            //         1：事件处于捕获状态
            // ​        2：事件处于真正的触发者
            // ​        3：事件处于冒泡状态
            console.log(e.eventPhase);
            // target：返回事件真正的触发者
            console.log(e.target);
            console.log(e.srcElement);//ie678可用
            // currentTarget：返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁)
            console.log(e.currentTarget);//ie678不认识
            console.log(this);
            console.log(e);
        })
        box2.addEventListener('mouseenter', function (e) {
            ++y;
            box2.querySelector('p').innerHTML = y;
            console.log(e.bubbles);
            console.log(e.eventPhase);
        })

        // var btn = document.getElementsByTagName('button');
        // var input = document.getElementsByTagName('input');
        // var tsb = document.querySelector('.tsb');

        // btn[0].onclick = function () {
        //     input[0].value--;
        //     changeColor(input);
        // };
        // btn[1].onclick = function () {
        //     input[0].value++;
        //     changeColor(input);
        // };
        // btn[2].onclick = function () {
        //     input[1].value--;
        //     changeColor(input);
        // };
        // btn[3].onclick = function () {
        //     input[1].value++;
        //     changeColor(input);
        // };
        // btn[4].onclick = function () {
        //     input[2].value--;
        //     changeColor(input);
        // };
        // btn[5].onclick = function () {
        //     input[2].value++;
        //     changeColor(input);
        // };
        // for (let i in input) {
        //     input[i].onchange = function () {
        //         changeColor(input);
        //     };
        // };

        // function changeColor(input) {
        //     tsb.style.background = `rgb(${input[0].value},${input[1].value},${input[2].value})`;
        // }


        // 表单事件
        // 得到焦点触发~~onfocus
        // 失去焦点触发~~onblur
        // 输入内容触发~~oninput
        // 元素改变触发~~onchange
        // 表单提交触发~~onsubmit
        // 表单重置触发~~onreset
        // 表单内文本被选中时触发~~onselect
        // 搜索时触发~~onsearch


        // 键盘事件
        // 键盘按下触发~~onkeydown
        // 键盘松开触发~~onkeyup
        // 键盘按下并松开触发~~onkeypress
        // document.body.onkeyup = function (e) {
        //     console.log(e.key, e.keyCode);
        // }

        // 滚动事件
        // onscroll事件
        // window.onscroll = function () {
        //     console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);
        // }


        // 手机触摸事件
        // 手指触摸屏幕时触发~~ontouchstart
        // 手指在屏幕上滑动时连续触发~~ontouchmove
        // 手指从屏幕离开时触发~~ontouchend
        // 系统停止跟踪触摸时触发~~ontouchcancel
        // window.ontouchstart = function (event) {
        //     document.body.style.background = "red";
        //     console.log(event);
        //     console.log(event.touches);
        //     console.log(event.targetTouches);
        //     console.log(event.touches[0].clientX);
        //     console.log(event.touches[0].clientY);
        //     console.log(event.touches[0].identifier);
        //     console.log(event.touches[0].target);
        // }
        // window.ontouchend = function () {
        //     document.body.style.background = "orange";
        // }

        // document.addEventListener("readystatechange", function () {
        //     console.log(document.readyState);
        // })


        // **事件委托/事件代理：事件委托就是利用【事件冒泡】，自己本身做不了这个事，让上一级来做这个事，
        // 只指定一个事件处理程序，就可以管理某一类型的所有事件。
        var list = document.querySelector('.list');
        list.onclick = function (e) {
            e.target.innerHTML = "牛牪犇逼";
        }
    </script>
</body>

</html>